<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p {
            margin: 4px;
            font-size: 16px;
            font-weight: bold;
        }
        .blue {
            color: blue;
        }
        .highlight {
            background-color: yellow;
        }
        .under {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<button>del even blue</button>
<button>del highlight</button>
<button>del all under</button>
<button>del all under highlight</button>
<button>del all class</button>
<button>reset</button>
<p class="blue under">Hello</p>
<p class="blue under highlight">and</p>
<p class="blue under">then</p>
<p class="blue under">Goodbye</p>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
    $("button").each(function (index) {
        $(this).on("click",function () {
            if (index === 0) {
                // 删除偶数p的字体颜色（索引从0开始）
                $("p:even").removeClass("blue");
            }
            else if (index === 1) {
                // 删除高亮
                $("p").filter(".highlight").removeClass("highlight");
            }
            else if (index === 2) {
                // 删除所有的下划线
                $("p").removeClass("under");
            }
            // 一次移除多个属性
            else if (index === 3) {
                $("p").each(function () {
                if ($(this).hasClass("under highlight")) {
                        $(this).removeClass("under highlight");

                }
                });
            }
            // 使用函数,删除所有样式
            else if (index === 4) {
                $("p").removeClass(function (index, classes) {

                    if ($(this).hasClass(classes))  {
                        return classes;
                    }
                    // return "blue under highlight";

                })
            }
            else {
                // 重置
                $("p").addClass("under").filter(":even").addClass("blue").end().filter(":nth(1)").addClass("highlight")
            }
        })
    })

</script>
</body>
</html>